<%--****************************************************************************
* 文件名：moban.jsp
* 功能： 模板样式
* 版权所有：J126
* 公司名: J126
*
* --时间--               ---作者--- ----------描述----------
* 2016年10月27日 上午10:05:36         杨文晶		                   新建
*****************************************************************************--%>

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="spring"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>注册页面</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/gloab.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/register.js"></script>
</head>
<body class="bgf4">
<div class="login-box f-mt10 f-pb50">
	<div class="main bgf">    
    	<div class="reg-box-pan display-inline" style="height:648px;">  
        	<div class="step">        	
                <ul>
                    <li class="col-xs-4 on">
                        <span class="num"><em class="f-r5"></em><i>1</i></span>                	
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">填写账户信息</p>
                    </li>
                    <li class="col-xs-4">
                        <span class="num"><em class="f-r5"></em><i>2</i></span>
                        <span class="line_bg lbg-l"></span>
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">填写账户详细信息</p>
                    </li>
                    <li class="col-xs-4">
                        <span class="num"><em class="f-r5"></em><i>3</i></span>
                        <span class="line_bg lbg-l"></span>
                        <p class="lbg-txt">注册成功</p>
                    </li>
                </ul>
            </div>
        	<div class="reg-box" id="verifyCheck" style="margin-top:20px;">
        	  <spring:form  action="landladyRegist.do" method="post" commandName="landlady"  id="registForm" >
            	<div class="part1">                	
                     <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>用户名：</span>    
                        <div class="f-fl item-ifo">
                        	<input name="ladyType" id="ladyType" type="hidden" value="0"/>
                        	<input name="ladyRP" id="ladyRP" type="hidden" value="0/0"/>
                        	<input name="user.userRole" id="userRole" type="hidden" value="0">
                            <input type="text" maxlength="20" name="user.userName" id="userName" onblur="checkNameIsExist()" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:6-20||isUname" data-error="用户名不能为空||用户名长度6-20位||只能输入中文、字母、数字、下划线，且以中文或字母开头"  />                            <span class="ie8 icon-close close hide"></span>
                            <label class="icon-sucessfill blank hide" id="userNameIcon"></label>
                            <label class="focus"><span id="nameTip">3-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span></label>
                            <label class="focus valid" id="userNameTip"></label>
                            <spring:errors delimiter="," path="user.userName" ></spring:errors>
                        </div>
                    </div>
                   
                     <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>密码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="password" id="password" maxlength="20" name ="user.userPWD"class="txt03 f-r3 required" tabindex="3" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="密码不能为空||密码长度6-20位||该密码太简单，有被盗风险，建议字母+数字的组合" /> 
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="password"></span>                        
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus" id="pwdTip">6-20位英文（区分大小写）、数字、字符的组合</label>
                            <label class="focus valid" id="passwordTip"></label>
                            <span class="clearfix"></span>
                            <label class="strength">
                            	<span class="f-fl f-size12">安全程度：</span>
                            	<b><i>弱</i><i>中</i><i>强</i></b>
                            </label> 
                             <spring:errors delimiter="," path="user.userPWD"></spring:errors>   
                             
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>确认密码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="password" id="cpwd" maxlength="20" class="txt03 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="密码不能为空||密码长度6-16位||两次密码输入不一致" id="rePassword" />
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="rePassword"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus" id="cpwdTip">请再输入一遍上面的密码 </label> 
                            <label class="focus valid" id="comPwdTip"></label>                          
                        </div>
                    </div>
                   
                   <div class="item col-xs-12" style="float:right;width:360px;">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="nextPart">下一步</a>                          
                        </div>
                    </div> 
                
                </div>
                <div class="part2" style="display:none;">
               
                  <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>真实姓名：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" name="ladyName" id="ladyName" keycodes="tel" tabindex="2" data-valid="isNonEmpty||between:2-20||isUname" data-error="真实姓名不能为空||真实姓名格式不正确" maxlength="11" /> 
                            <span class="ie8 icon-close close hide"></span>                           
                            <label class="icon-sucessfill blank hide"></label>
                           <label class="focus"><span>2-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span></label>
                            <label class="focus valid"></label>
                            <spring:errors delimiter="," path="ladyName"></spring:errors>   
                        </div>
                    </div>
                	   <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" name="ladyTel" id="ladyTel" keycodes="tel" tabindex="2" data-valid="isNonEmpty||isPhone" data-error="手机号码不能为空||手机号码格式不正确" maxlength="11"  /> 
                            <span class="ie8 icon-close close hide"></span>                           
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">请填写11位有效的手机号码 </label>
                            <label class="focus valid"></label>
                            <spring:errors delimiter="," path="ladyTel"></spring:errors>   
                        </div>
                    </div>
                   
                        <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>身份证号：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" name="ladyCard" id="ladyCard" keycodes="tel" tabindex="2" data-valid="isNonEmpty||between:3-20" data-error="身份证号不能为空||身份证号格式不正确" maxlength="18"  onblur="checkCard()"/> 
                            <span class="ie8 icon-close close hide" ></span>                           
                            <label class="icon-sucessfill blank hide" id="cardIcon"></label>
                           <label class="focus"><span>18位数字</span></label>
                            <label class="focus valid" id="cardTip"></label>
                            <spring:errors delimiter="," path="ladyCard" ></spring:errors> 
                        </div>
                    </div>
                      <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>家庭住址：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" name="ladyAddress" id="ladyAddress" keycodes="tel" tabindex="2" data-valid="isNonEmpty||between:3-20||isUname" data-error="家庭地址不能为空||家庭地址格式不正确" maxlength="11"  /> 
                            <span class="ie8 icon-close close hide"></span>                           
                            <label class="icon-sucessfill blank hide" ></label>
                           <label class="focus"><span>3-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span></label>
                            <label class="focus valid"></label>
                             <spring:errors delimiter="," path="ladyAddress"></spring:errors> 
                        </div>
                    </div>
                     <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>职位描述：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" name="ladyDescribe" id="ladyDescribe" keycodes="tel" tabindex="2" data-valid="isNonEmpty||between:3-20||isUname" data-error="职位描述不能为空||职位描述格式不正确" maxlength="11"  /> 
                            <span class="ie8 icon-close close hide"></span>                           
                            <label class="icon-sucessfill blank hide"></label>
                           <label class="focus"><span>3-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span></label>
                            <label class="focus valid"></label>
                              <spring:errors delimiter="," path="ladyDescribe"></spring:errors> 
                        </div>
                    </div>
                   
                    </spring:form>
                       <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="4" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" id="randCode" data-valid="isNonEmpty" data-error="验证码不能为空" /> 
                            <span class="ie8 icon-close close hide"></span>
                            <label class="f-size12 c-999 f-fl f-pl10" >
                            	 <img src="authCode.do" onclick="chageCode()" id="codeImage"/>                     
                            </label>                 
                            <label class="icon-sucessfill blank hide" style="left:380px" id="icons"></label>
                            <label class="focusa">看不清？<a href="javascript:;" class="c-blue" onclick="chageCode()">换一张</a></label>   
                            <label class="focus valid showyzm" style="left:370px"></label>                        
                        </div>
                    </div>
                    <div class="item col-xs-12" style="height:auto">
                        <span class="intelligent-label f-fl">&nbsp;</span>  
                        <p class="f-size14 required"  data-valid="isChecked" data-error="请先同意条款"> 
                        	<input type="checkbox" checked /><a href="javascript:showoutc();" class="f-ml5">我已阅读并同意条款</a>
                        </p>                       
                        <label class="focus valid"></label>  
                    </div>
                    <div class="item col-xs-12" style="float:left;width:360px;">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_ladyland">包租婆注册</a>                         
                        </div>
                    </div> 
                     <div class="item col-xs-12" style="float:left;width:360px;">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;"  class="btn btn-blue f-r3" id="btn_renter">抢租客注册</a>                          
                        </div>
                    </div>  
                </div>
               
                    </div>
                       
                
               <div class="part3" style="display:none">
                	 <div class="part4 text-center" >
                	<h3>您已注册成功，请耐心等待管理员审核资料！</h3>
                    <p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">3</strong> 秒钟后，跳转到 <a href="javascript:void(0);" class="c-blue">登录页面</a></p>
                </div>        
            </div>
        </div>
    </div>
</div>
<div class="m-sPopBg" style="z-index:998;"></div>
<div class="m-sPopCon regcon">
	<div class="m-sPopTitle"><strong>服务协议条款</strong><b id="sPopClose" class="m-sPopClose" onClick="closeClause()">×</b></div>
    <div class="apply_up_content">
    	<pre class="f-r0">
		<strong >同意以下服务条款，提交注册信息</strong>
        </pre>
    </div>
    <center><a class="btn btn-blue btn-lg f-size12 b-b0 b-l0 b-t0 b-r0 f-pl50 f-pr50 f-r3" href="javascript:closeClause();">已阅读并同意此条款</a></center>
</div>
</div>
<script>
function chageCode(){
	 
    $('#codeImage').attr('src','authCode.do?abc='+Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
}
function checkCode(){
	var code = getCode();
	var inputCode = $("#randCode").val();
	if(code=="" ||code==null){
		
		chageCode();
	}else if(inputCode == code){
        return true;
    }else{
    
        return false;
    }
		
}
function getCode(){
	var code ="";
	$.ajax({
		url:"getAuthCode.do",
		type:"post",
		async:false,
		success:function(msg){
			code=msg;
		}
	})
	return code;
}
$(function(){
	
	$("#randCode").blur(function(){
		if(!checkCode()){
			if($("#randCode").val()=="" ||$("#randCode").val()==null){
				$(".showyzm").text("请输入验证码");
			}else{
				$(".showyzm").text("验证码错误");
			}
			
			chageCode();
			$("#icons").hide();
		}else{
			$("#icons").show();
			$(".showyzm").text("")
		}
	})
})
function checkNameIsExist(){
	var userName = $("#userName").val();
	var isExist=true;
	$.ajax({
		url:"findUserByName.do",
		type:"post",
		data:{"inputName":userName},
		async:false,
		success:function(msg){
			console.info(msg);
			if(msg.userName!=undefined){
				//false表示存在用户
				isExist=false;
				$("#userNameTip").html("用户名已存在");
				$("#userNameIcon").hide();
			}else{
				$("#userNameIcon").show();
			}
		}
	})
	return isExist;
}
function checkCardIsExist(ladyCard){
	var isExist=true;
	$.ajax({
		url:"findLadyByCard.do",
		type:"post",
		data:{"card":ladyCard},
		async:false,
		success:function(msg){
			if(msg.ladyName!=undefined){
				//false表示存在用户
				isExist=false;
				$("#cardTip").html("身份证已经存在了，请检查");
				$("#cardIcon").hide();
			}else{
				$("#cardIcon").show();
			}
		}
	})
	return isExist;
}
function checkCard(){
	var ladyCard = $("#ladyCard").val();
	var reg=/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
	if(reg.test(ladyCard)){
		$("#cardIcon").show();
		return checkCardIsExist(ladyCard );
	}else{
		
		$("#cardTip").html("请输入合法身份证");
		$("#cardIcon").hide();
		return false;
	}
}
$(function(){	
	$("#userName").focus(function(){
		$("#userNameTip").hide();
		$("#nameTip").show();
	})
	$("#password").focus(function(){
		$("#passwordTip").hide();
		$("#pwdTip").show();
		
	})
	$("#cpwd").focus(function(){
		$("#comPwdTip").hide();
		$("#cpwdTip").show();
	})
	$("#userName").blur(function(){
		$("#userNameTip").show();
	})
	$("#password").blur(function(){
		$("#passwordTip").show();
	})
	$("#cpwd").blur(function(){
		$("#comPwdTip").show();
	})
	//第一页的确定按钮
	$("#nextPart").click(function(){
		var nameStr = $("#userName").attr("class");
		var pwdStr =$("#password").attr("class");
		var cpwdStr = $("#cpwd").attr("class");
		if($("#userName").val()=="" ){
			 $("#userName").addClass("v_error");
			$("#userNameTip").html("<label style='color:red;'>请输入用户名</label>");
			$("#nameTip").hide();
		}
		if($("#password").val()==""){
			$("#password").addClass("v_error");
			$("#passwordTip").html("<label style='color:red;'>请输入密码</label>");
			$("#pwdTip").hide();
		}if($("#cpwd").val()==""){
			$("#cpwd").addClass("v_error");
			$("#comPwdTip").html("<label style='color:red;'>请输入密码</label>");
			$("#cpwdTip").hide();
		}
		
		if(nameStr.match("v_error")==null && pwdStr.match("v_error")==null && cpwdStr.match("v_error")==null && $("#userName").val()!="" && $("#password").val()!="" && $("#cpwd").val()!=""){
			$(".part1").hide();
			$(".part2").show();
			$(".step li").eq(1).addClass("on");
		}
		
	})
	$("#btn_ladyland").click(function(){	
		$("#registForm").attr("action","landladyRegist.do");
		$("#userRole").val(0);
		$("#ladyName").attr("name","ladyName");
		$("#ladyTel").attr("name","ladyTel");
		$("#ladyCard").attr("name","ladyCard");
		$("#ladyAddress").attr("name","ladyAddress");
		$("#ladyDescribe").attr("name","ladyDescribe");
		$("#ladyRP").attr("name","ladyRP");
		if(!verifyCheck._click() || !checkNameIsExist() || !checkCard() ||! checkCode()){
			return;
		} 
		$(".part1").hide();
		$(".part2").hide();
		$(".part3").show();
		var t = setInterval(function(){
			var times =$("#times").html();
			times = times-1;
			$("#times").html(times);
			if(times==0){
				clearInterval(t);
			}
		},1000)
		setTimeout(function(){
			$("#registForm").submit();	
		},3000)
		$(".step li").eq(2).addClass("on");
	});
	$("#btn_renter").click(function(){	
		$("#registForm").attr("action","renterRegist.do");
		$("#userRole").val(1);
		$("#ladyName").attr("name","renterName");
		$("#ladyTel").attr("name","renterTel");
		$("#ladyCard").attr("name","renterCard");
		$("#ladyAddress").attr("name","renterAddress");
		$("#ladyDescribe").attr("name","renterDescribe");
		$("#ladyRP").attr("name","renterRP");
		if(!verifyCheck._click() || !checkNameIsExist() || !checkCard() ||! checkCode() ) return;
		$(".part1").hide();
		$(".part2").hide();
		$(".part3").show();
		var t = setInterval(function(){
			var times =$("#times").html();
			times = times-1;
			$("#times").html(times);
			if(times==0){
				clearInterval(t);
			}
		},1000)
		setTimeout(function(){
			$("#registForm").submit();	
		},3000)
		$(".step li").eq(2).addClass("on");
	});

});
function showoutc(){$(".m-sPopBg,.m-sPopCon").show();}
function closeClause(){
	$(".m-sPopBg,.m-sPopCon").hide();		
}
</script>
</body>
</html>
